<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>模态框 - 开发</title>
  <link rel="stylesheet" href="./asset/css/modallayer.min.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.min.css">
  <script src="https://cdn.bootcss.com/font-awesome/5.11.2/js/all.min.js"></script>
  <script src="./asset/js/modallayer-ie.min.js"></script>
  <!-- <script src="./asset/js/modallayer.min.js"></script> -->
  <style>
    #test-button-container {
      position: absolute;
      top: 50%;
      left: 0px;
      right: 0px;
      width: 145px;
      margin: 0px auto;
      text-align: center;
      transform: translateY(-50%);
    }

    #test-button-container button {
      width: 145px;
      margin: 5px 0px;
      padding: 10px 0px;
    }
  </style>
</head>
<body>
  <div id="test-button-container">
    <button id="msg-button" type="button">测试msg</button>
    <button id="alert-button" type="button">测试alert</button>
    <button id="confirm-button" type="button">测试confirm</button>
    <button id="prompt-button" type="button">测试prompt</button>
    <button id="page-button-1" type="button">测试page</button>
    <button id="page-button-2" type="button">测试page</button>
  </div>
</body>
<script>
  // 测试msg
  document.querySelector('#msg-button').onclick = function () {
    let option = {
      popupTime: 2,
      hook: {
        initStart: function () {
          // 检查之前老旧实例如果存在则销毁
          if (document.querySelector('#modal-layer-container'))
            ModalLayer.removeAll();
        }
      },
      displayProgressBar: true,
      displayProgressBarPos: 'top',
      displayProgressBarColor: 'red',
      content: '<i class="fas fa-check" style="color: deepskyblue"></i>点击遮罩层自动消失!',
    };

    ModalLayer.msg(option);
    // ModalLayer.msg('测试一下');
  }
  // 测试alert
  document.querySelector('#alert-button').onclick = function () {
    let option = {
      hook: {
        initStart: function () {
          // 检查之前老旧实例如果存在则销毁
          if (document.querySelector('#modal-layer-container'))
            ModalLayer.removeAll();
        }
      },
      popupTime: 0,
      type: 'alert',
      title: '测试',
      dragOverflow: true,
      content: '<i class="fas fa-check" style="color: deepskyblue"></i>点击遮罩层自动消失!',
    };

    ModalLayer.alert(option);
  }
  // 测试confirm
  document.querySelector('#confirm-button').onclick = function () {
    let option = {
      title: '测试',
      popupTime: 10,
      hook: {
        initStart: function () {
          // 检查之前老旧实例如果存在则销毁
          if (document.querySelector('#modal-layer-container'))
            ModalLayer.removeAll();
        }
      },
      displayProgressBar: true,
      displayProgressBarPos: 'left',
      content: '你认为你能成功吗 ?',
      okText: '那是必须滴！',
      noText: '怎么可能 ?',
      callback: {
        ok: function () {
          this.hide();
          ModalLayer.alert({
            content: '<i class="fas fa-check-circle" style="color: green"></i> Good Luck!',
            parentModalLayer: this
          });
        },
        no: function () {
          ModalLayer.alert({
            content: '<i class="fas fa-window-close" style="color: red"></i> More Confidence!!<br>五秒后自动关闭该窗口'
          });
        }
      }
    }

    ModalLayer.confirm(option);
  }

  // 测试prompt
  document.querySelector('#prompt-button').onclick = function () {
    let option = {
      title: '测试',
      popupTime: 0,
      hook: {
        initStart: function () {
          // 检查之前老旧实例如果存在则销毁
          if (document.querySelector('#modal-layer-container'))
            ModalLayer.removeAll();
        }
      },
      displayProgressBar: true,
      displayProgressBarColor: 'red',
      displayProgressBarPos: 'right',
      content: '<input type="text" style="width: calc(100% - 2px); height: 24px; font-size: 16px; color: red;" placeholder="输入内容进行测试">',
      okText: '提交',
      noText: '取消',
      callback : {
        ok: function () {
          this.hide();
          ModalLayer.alert({
            parentModalLayer: this,
            content: '<i class="fas fa-check-circle" style="color: green"></i> 提交成功!<br>你提交的数据为: ' + this.getNodes().container.querySelector('input').value
          });
        },
      }
    };

    ModalLayer.prompt(option);
  }


  // 测试Page
  document.querySelector('#page-button-1').onclick = function () {
    let option = {
      mask: false,
      title: '测试测试',
      popupTime: 0,
      contentFullContainer: false,
      pageOption: {
        src: 'https://baidu.com',
      }
    };
    ModalLayer.page(option);
  }
  document.querySelector('#page-button-2').onclick = function () {
    let option = {
      mask: false,
      title: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试',
      popupTime: 0,
      contentFullContainer: true,
      pageOption: {
        scrolling: 'yes',
        src: 'https://www.hao123.com/',
      }
    };
    ModalLayer.page(option);
  }

</script>
</html>